<template>
  <div id="header">
    <a-menu :selected-keys="[route.path]" @menu-item-click="menuItemClick" mode="horizontal">
      <a-menu-item style="cursor: pointer;" key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
        <img @click="router.push('/')" width="100" height="40" src="https://bed.flyone.space/%E7%AC%94%E8%AE%B0/043a4f7f5b52bb9fee13ba4caa2e07ec.png"/>
      </a-menu-item>
      <a-menu-item key="/">中药信息</a-menu-item>
      <a-menu-item key="/map">地域分布</a-menu-item>
      <a-menu-item key="/identify">中药识别</a-menu-item>
      <a-menu-item key="/medicine">药方查询</a-menu-item>
      <a-menu-item key="/forum">论坛</a-menu-item>
    </a-menu>
    <div class="user pointer">
      <a-popover trigger="click" position="br" v-if="userStore.loginUser !== '未登录'">
        <a-avatar>
          {{ userStore.loginUser.userName }}
        </a-avatar>
        <template #content>
          <div class="pointer mb-4 hover:bg-cyan-200 p-2 rounded" @click="showUserInfo=true">用户中心</div>
          <div class="pointer hover:bg-cyan-200 p-2 rounded" @click="logout">退出登录</div>
        </template>
      </a-popover>
      <a-popover trigger="click" position="br" v-else>
        <a-avatar>
          未登录
        </a-avatar>
        <template #content>
          <div class="pointer" @click="router.push('/login')">立即登录</div>
        </template>
      </a-popover>
    </div>
  </div>

  <div class="user-info" v-if="userStore.loginUser !== '未登录'">
    <fly-user-info :show="showUserInfo" @change-show="changeShow" :user-info="userStore.loginUser"/>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '../stores/user.ts'
import {useRoute, useRouter} from "vue-router";
import {onBeforeMount, onDeactivated, onMounted, ref} from "vue";
import {Notification} from '@arco-design/web-vue';
import FlyUserInfo from "./fly-user-info.vue";
import myAxios from "../plugins/myAxios.ts";
import FlyWeather from "./fly-weather.vue";

const router = useRouter();
const route = useRoute()
const userStore = useUserStore();
const showUserInfo = ref(false);

const menuItemClick = (key: string) => {
  router.push(key);
}
const logout = () => {
  userStore.userLogout();
  Notification.success('退出成功')
}

const changeShow = (show: boolean) => {
  showUserInfo.value = show;
}

onMounted(() => {
  userStore.getLoginUser();
})
</script>
<style scoped>
#header {
  padding: 0 24px;
  height: 60px;
  background: var(--color-bg-1);
}

.user {
  position: absolute;
  top: 10px;
  right: 20px;
}

.pointer {
  cursor: pointer;
}

</style>
